<template>
	<view class="add-box">
		<view class="nav">
			<!-- <view class="item" v-for="(item,index) in category" :key="index" @tap="tab(item,index)" :class="{'selected':isActive==item.id}">{{item.tagName}}</view> -->
			<scroll-view class="tab-scroll" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
				<view class="tab-scroll_box">
					<view class="tab-scroll_item" v-for=" (item,index) in category" :key="index"  :class="{'active':isActive==item.id}" @click="chenked(item,index)">
						<text class="text">{{item.tagName}}</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="m-cont">
			<view class="list" v-for="(i,inx) in imgList" :key="i.id">
				<view class="cont">
					<view class="item" v-for="(item,index) in i.elementsImages" :key="index" @tap="check(item.id,item,index,inx)">
						<image class="img" :src="item.url"></image>
						<view class="close">
							<image class="close-img" src="../../static/addr.png" v-show="!i.groupIds.includes(item.id)"></image>
							<image class="close-img" src="../../static/g.png" v-show="i.groupIds.includes(item.id)"></image>
						</view>
					</view>
				</view>
				<view class="hr" v-if="i.describ"></view>
				<view class="desc" v-if="i.describ">
					{{i.describ}}
				</view>
			</view>
			<empty @reload="getList" v-if="imgList.length < 1 && show"/>
			<view class="bnt" @tap="selectedFn()">
				选好了
			</view>
			<view class="bnt" @tap="view()" v-if="false">
				查看
			</view>
		</view>
		<!--自定义弹窗-->
		<show-modal :show="isShowModal" 
			@close="closeModal" 
			:title="modalTitle" 
			:content="modalContent"
			:cancelText="modalCancelText"
			:confirmText="modalConfirmText"
			@cancel="bindBtn('cancel')" 
			@confirm="bindBtn('confirm')">
		</show-modal>
	</view>
</template>

<script>
	import {getMySubjectElements,getQuerylist} from "@/api/user.js"
	import ShowModal from "@/components/showModal.vue"
	import empty from "@/components/empty.vue";
	export default {
		components:{
			ShowModal,
			empty
		},
		data() {
			return {
				isActive: '',
				checkIndex: '',
				category:[],
				imgList: [],
				len: [], //可选择个数
				isShowModal: false,
				modalTitle: '温馨提示',
				modalContent: '',
				modalCancelText: '取消',
				modalConfirmText: '确定',
				isModalType: '',
				contentScrollW: 0, // 导航区宽度
				scrollLeft: 0, // 横向滚动条位置
				show: false
			};
		},
		onLoad(ops) {
			this.len = ops.len
			if(this.category.length) return
			this.tag()
		},
		methods:{
			getScrollW() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.tab-scroll').boundingClientRect(data => {
					  // 拿到 scroll-view 组件宽度
					  this.contentScrollW = data.width
				 }).exec();
				 query.selectAll('.tab-scroll_item').boundingClientRect(data => {
					 let dataLen = data.length;
					  for (let i = 0; i < dataLen; i++) {
						  //  scroll-view 子元素组件距离左边栏的距离
						  this.category[i].left = data[i].left;
						 //  scroll-view 子元素组件宽度
						 this.category[i].width = data[i].width
					}
				 }).exec()
			},
			// 当前点击子元素靠左留一个选项展示，子元素宽度不相同也可实现
			chenked(item,index) {
				if(this.isActive == item.id) return
				this.isActive = item.id;
				this.scrollLeft = 0;
				for (let i = 0; i <= index - 1; i++) {
					this.scrollLeft += this.category[i].width
				}
				this.list = []
				this.show = false
				this.getList()
			},
			tab(item,index){
				this.isActive = item.id
				this.getList()
			},
			tag(ops){
				// 获取标签
				let data = uni.getStorageSync('category') || ''
				if(data) {
					this.category = data
					this.isActive = data[0].id
					this.$nextTick(() => {
						this.getScrollW()
					})
					this.getList()
					return
				}
				getQuerylist().then((res) => {
					this.category = res
					this.category.unshift({
						tagName: '全部',
						id: ''
					})
					this.isActive = res[0].id
					this.$nextTick(() => {
						this.getScrollW()
					})
					this.getList()
				})
			},
			getList() {
				this.show = false
				// 是否是之前选过的值
				let electedImgs = uni.getStorageSync('selectedImgsList')
				let vArr = []
				getMySubjectElements({tagId:this.isActive}).then((res) => {
					let data = res
					let arr = []
					data.forEach((ele,index) => {
						let elementsImages = ele.elementsImagesList//ele.elementsImages ? ele.elementsImages.split(',') : []
						let img = []
						elementsImages.forEach((ei,index) => {
							img.push({
								id: ei.id, //+ '_' + parseInt(index+1),
								subjectId: ei.subjectId,
								url: ei.url
							})
						})
						ele.groupIds = electedImgs && electedImgs.length && electedImgs[index] ? electedImgs[index].groupIds : []
						// 设置选中的图片结合
						ele.groupImgs = electedImgs && electedImgs.length && electedImgs[index] ? electedImgs[index].groupImgs : []
						ele.elementsImages = img //elementsImages
						arr.push(ele)
					})
					this.show = true
					this.imgList = arr
				})
			},
			check(id,item,index,inx){
				
				let _this = this;
				let arr = this.imgList[inx].groupIds;
				let imgs = this.imgList[inx].groupImgs;
				if(arr.includes(id)){
				  //includes()方法判断是否包含某一元素,返回true或false表示是否包含元素，对NaN一样有效
					let index = arr.indexOf(id); // 判断数组中是否有选中的id,如果有则去掉
					if(index > -1){
						arr.splice(index,1)
						imgs.splice(index,1)
					}
				}else{
				   this.imgList[inx].groupIds.push(id)
				   this.imgList[inx].groupImgs.push(item.url)
				}
				
				// 可选个数限制
				let data = this.imgList
				let sArr = []
				data.forEach((d) =>{
					d.groupImgs.forEach((s) =>{
						sArr.push(s)
					})
				})
				let len = uni.getStorageSync('selectedImgsData') || []
				console.log('选择的个数',(Number(sArr.length) + Number(this.len)))
				if((Number(sArr.length) + Number(this.len)) >= 10){
					this.view()
					return
				}
			},
			// 选好返回
			selectedFn(flag){
				let arr = []
				let sIds = []
				this.imgList.forEach((ele,inx) => {
					let groupImgs = ele.groupImgs
					sIds.push({
						id:ele.id,
						groupImgs:ele.groupImgs,
						groupIds:ele.groupIds
					})
				})
				uni.setStorageSync('selectedImgsList',sIds)
				uni.navigateBack('/pages/buyer/rendering')
				uni.$emit('updateData', {msg:'下级返回上级页面',flag})
			},
			view(){
				const _this = this
				
				// uni.showModal({
				//     title: '温馨提示',
				//     content: '您好，您的手指位置选择已满，已经可以下单啦',
				// 	cancelText: '查看',
				// 	confirmText: '下单',
				//     success: function (res) {
				//         if (res.confirm) {
				//             console.log('用户点击确定');
				//         } else if (res.cancel) {
				//             console.log('用户点击取消');
				// 			_this.selectedFn()
				//         }
				//     }
				// });
				
				this.isModalType = 1
				this.isShowModal = true
				// this.modalTitle = '温馨提示'
				this.modalContent = '您好，您的手指位置选择已满，已经可以下单啦'
				this.modalCancelText = '查看'
				this.modalConfirmText = '下单'
			},
			bindBtn(type){
				console.log(type,'0')
				if(this.isModalType == 1 && type == "cancel") {
					this.selectedFn(false)
				}
				if(this.isModalType == 1 && type == "confirm") {
					this.selectedFn(true)
				}
			},
			closeModal(){
				this.isShowModal = false
			}
		}
	}
</script>

<style lang="less" scoped>
.add-box{
	padding-top: 32rpx;
	padding-bottom: 180rpx;
	.m-cont{
		margin: 0 32rpx;
	}
	.nav{
		// .item{
		// 	font-family: PingFangSC-Regular;
		// 	font-size: 24rpx;
		// 	padding: 12rpx 24rpx;
		// 	color: #666;
		// 	display: inline-block;
		// 	margin-right: 16rpx;
		// }
		// .selected{
		// 	background: #E4919D;
		// 	color: #fff;
		// 	border-radius: 32rpx;
		// }
		width: 100%;
		align-items: center;
		height: 90rpx;
		background-color: #f3ecef;
		.tab-scroll{
			flex: 1;
			overflow: hidden;
			box-sizing: border-box;
			padding-left: 30rpx;
			padding-right: 30rpx;
			.tab-scroll_box{
				display: flex;
				align-items: center;
				flex-wrap: nowrap;
				box-sizing: border-box;
				.tab-scroll_item{
					margin-right: 17rpx;
					flex-shrink: 0;
					padding: 0 24rpx;
					height: 56rpx;
					line-height: 56rpx;
					display: flex;
					justify-content: center;
					font-size: 24rpx;
					border-radius: 32rpx;
					font-family: PingFangSC-Regular;
					color: #AAAAAA;
				}
				.active{
					border-radius: 32px;
					background: #E5CAD6;
					color: #fff;
				}
			}
		}
	}
	.list{
		border-radius: 44rpx;
		padding-top: 35rpx;
		padding-bottom: 35rpx;
		background: #FFFFFF;
		margin-top: 32rpx;
		box-shadow: 0px 8rpx 20rpx 0px rgba(228, 73, 91, 0.05);
		.cont{
			display: flex;
			flex-flow: wrap;
		}
		.item{
			width: 20%;
			height: 166rpx;
			text-align: center;
			margin-bottom: 60rpx;
		}
		.img{
			width: 90rpx;
			height: 166rpx;
			border-radius: 25rpx;
		}
		.close-img{
			width: 32rpx;
			height: 32rpx;
		}
	}
	.hr{
		height: 2rpx;
		background-color: #E6E6E6;
		margin: 0 28rpx;
		margin-top: 12rpx;
		margin-bottom: 25rpx;
	}
	.desc{
		font-size: 28rpx;
		color: #333;
		margin: 0 25rpx;
		margin-top: 10rpx;
	}
	.bnt{
		width: 90%;
		position: fixed;
		left: 50%;
		bottom: 52rpx;
		margin-left: -45%;
		border-radius: 50rpx;
		height: 98rpx;
		line-height: 98rpx;
		background: #E4919D;
		font-size: 36rpx;
		color: #fff;
		text-align: center;
		margin-top: 114rpx;
	}
}

</style>
